/**
 * JSX
 * JSX 是JavaScript XML的缩写，表示在js代码中谢HTML结构
 * 优势
 * 1.类似与html的语法，学习成本低
 * 2.充分利用js的可编程能力
 *
 * 用法
 * 1. 识别常规变量
 * 2. 常规方法调用
 * 3. 三元运算符
 * 4. 注意：if switch-case 语句不支持
 *
 * 列表渲染
 * 技术方案：map 注意：遍历列表时同样需要一个number/string不可重复的key 提高diff性能，key仅在编译时使用，不出现在渲染后的dom结构中
 * 条件渲染原则：
 *    模板中的逻辑尽量精简：复杂的多分支逻辑，收敛为一个函数，通过一个封装函数来处理分支逻辑
 */

import './app.css'
const name = "ouyang";
const getAge = () => {
  return 18;
};
const flag = true;

/**
 * type = 1 return h1
 * type = 2 return h2
 * type = 3 return h3
 * type = 4 return h4
 */
const getHtag = (type) => {
  let str = "";
  switch (type) {
    case 1:
      str = <h1>this is h1</h1>;
      break;
    case 2:
      str = <h2>this is h2</h2>;
      break;
    case 3:
      str = <h3>this is h3</h3>;
      break;
    case 4:
      str = <h4>this is h3</h4>;
      break;
    default:
      break;
  }
  return str;
};
const songe = [
  { id: 1, name: "痴心绝对", show: true },
  { id: 2, name: "达拉崩吧", show: false },
  { id: 3, name: "像我这样的人", show: true },
];
function App() {
  return (
    <div className="App">
      <header className="App-header">
        App {name}
        <br />
        {getAge()}
        <br />
        {flag ? "good" : "loser"}
      </header>
      <ul>
        {songe.map((song) => (
          <li key={song.id}>
            {song.show ? <span style={{color:'red'}}>{song.name + '1'}</span> : "无权限"}
          </li>
        ))}
      </ul>
      <div className="active">{getHtag(1)}</div>
      {getHtag(2)}
      {getHtag(3)}
      {getHtag(4)}
    </div>
  );
}

export default App;
